{extend name="public/public"}
{block name='css'}
<style>
    .c1{margin: 30px 0;}
    .c2{font-size: 22px;color: #333;letter-spacing: 1px;}
    .c3{font-size: 16px;margin-top: 6px;color: #666;}
    .google-map{height:500px;position: relative;z-index: 1;}
    .my-map { margin: 0 auto; width: 100%; height: 100%; }
    .my-map .icon { background: url(http://lbs.amap.com/console/public/show/marker.png) no-repeat; }
    .my-map .icon-cir { height: 31px; width: 28px; }
    .my-map .icon-cir-red { background-position: -11px -5px; }
    .amap-container{height: 100%;}
    @media screen and (max-width: 750px){
        .google-map{height:300px;}
        .contact-form{padding: 20px;}
        .sp{padding: 30px 0;}
    }
</style>
{/block}

{block name="content"}
<div class="contact-area sp">
    <div class="container">
        <div class="row">
            <div class="col-md-5 contact-info">
                <div class="c1">
                    <div class="c2">联系我们</div>
                    <div class="c3">contact us</div>
                </div>
                <div class="single-info">
                    <h5>客服热线：</h5>
                    <p>{$c['web_mobile']}</p>
                </div>
                <div class="single-info">
                    <h5>邮箱：</h5>
                    <p>{$c['web_email']}</p>
                </div>
                <div class="single-info">
                    <h5>地址：</h5>
                    <p>{$c['company_addr']}</p>
                </div>
            </div>
            <div class="col-md-7">
                <form action="#" class="contact-form">
                    <div class="row">
                        <div class="col-lg-6">
                            <input type="text"  placeholder="请输入姓名" name="name">
                        </div>
                        <div class="col-lg-6">
                            <input type="email" placeholder="请输入邮箱（选填）" name="email">
                        </div>
                        <div class="col-lg-12">
                            <input type="text" placeholder="请输入手机号码" name="phone">
                        </div>
                        <div class="col-lg-12">
                            <textarea placeholder="请输入备注（选填）"  name="notes"></textarea>
                        </div>
                        <div class="col-lg-12 c1">
                            <button type="button" class="button">提交信息</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>  

<div class="google-map" >
	<div id="wrap" class="my-map">
		<div id="mapContainer"></div>
	</div>
</div>
  
{/block}

{block name='js'}
<script>
    $(".c1 button").click(function(res){

        if($("input[name='name']").val() == '')return layer.msg('请输入姓名')

        var phoneReg = /^[1][2-9][\d]{9}/;
        if(!phoneReg.test($('input[name="phone"]').val()))return layer.msg('请输入正确的手机号')

        var form = $("form").serialize();
        if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){
            form = form+'&client=移动端浏览器'
        } else{
            form = form+'&client=电脑端浏览器'
        }
        $.post("{:url('contact')}",form,function(res){
            if(res.code == 200){
                alert('提交成功')
                location.reload()
            }else{
                layer.msg(res.msg)
            }
        })
        
    })

</script>



<script src="//webapi.amap.com/maps?v=1.3&key=8325164e247e15eea68b59e89200988b"></script>
<script>
    var lng = Number("{$c['company_lag']}");
    var lat = Number("{$c['company_lat']}");
!function(){
    var infoWindow, map, level = 16,
        center = {lng:lng, lat:lat},
        features = [{type: "Marker", name: "{$c['company_name']}", desc: "{$c['company_addr']}", color: "red", icon: "cir", offset: {x: -9, y: -31}, lnglat: {lng:lng, lat: lat}}];

    function loadFeatures(){
        for(var feature, data, i = 0, len = features.length, j, jl, path; i < len; i++){
            data = features[i];
            switch(data.type){
                case "Marker":
                    feature = new AMap.Marker({ map: map, position: new AMap.LngLat(data.lnglat.lng, data.lnglat.lat),
                        zIndex: 3, extData: data, offset: new AMap.Pixel(data.offset.x, data.offset.y), title: data.name,
                        content: '<div class="icon icon-' + data.icon + ' icon-'+ data.icon +'-' + data.color +'"></div>' });
                    break;
                case "Polyline":
                    for(j = 0, jl = data.lnglat.length, path = []; j < jl; j++){
                        path.push(new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat));
                    }
                    feature = new AMap.Polyline({ map: map, path: path, extData: data, zIndex: 2,
                        strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity });
                    break;
                case "Polygon":
                    for(j = 0, jl = data.lnglat.length, path = []; j < jl; j++){
                        path.push(new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat));
                    }
                    feature = new AMap.Polygon({ map: map, path: path, extData: data, zIndex: 1,
                        strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity,
                        fillColor: data.fillColor, fillOpacity: data.fillOpacity });
                    break;
                default: feature = null;
            }
            if(feature){ AMap.event.addListener(feature, "click", mapFeatureClick); }
        }
    }

    function mapFeatureClick(e){
        if(!infoWindow){ infoWindow = new AMap.InfoWindow({autoMove: true}); }
        var extData = e.target.getExtData();
        infoWindow.setContent("<h5>" + extData.name + "</h5><div>" + extData.desc + "</div>");
        infoWindow.open(map, e.lnglat);
    }

    map = new AMap.Map("mapContainer", {center: new AMap.LngLat(center.lng, center.lat), level: level, keyboardEnable: false, scrollWheel: false});
    
    loadFeatures();

    map.on('complete', function(){
        map.plugin(["AMap.ToolBar", "AMap.OverView", "AMap.Scale"], function(){
            map.addControl(new AMap.ToolBar);
        map.addControl(new AMap.OverView({isOpen: true}));
        map.addControl(new AMap.Scale);
        });	
    })
    
}();
$(".nav-active-4").addClass('current-menu-item')
</script>
{/block}